<template>
  <div>
    <div class="modal-status modal-status-finish" v-if="importStatus">
      <a-icon class="finish" type="check-circle" theme="filled" />
      <h3>数据导入完成</h3>
      <p>
        成功导入<span class="blue">{{result.correctPhoneNum}}</span> 个手机号，
        有效<span class="blue">{{result.correctPhoneNum}}</span> 个手机号，
        无效<span>{{result.errorPhoneNum}}</span>个手机号
      </p>
      <span>{{ closeTime }}秒后自动关闭</span>
    </div>
    <div v-else class="modal-status">
      <div class="ant-alert ant-alert-info" style="text-align: center;">
         有效导入 <span class="blue">{{result.correctPhoneNum}}</span> 个手机号，
        导入无效 <span class="error">{{result.errorPhoneNum}}</span> 个手机号
      </div>
      <a-button @click="handleModal" style="margin: 10px 0;">导出</a-button>
      <a-table :columns="columns" :data-source="result.errorPhoneList" bordered>
        <template slot="checkErrortype" slot-scope="text, record">
          {{record.victimPhone?'号码格式有误':''}}
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
import { exportPhoneXls } from '@/api/warning/WarningData.js'
import { downLoadMix } from '@/utils/export-util/util'
export default {
  data() {
    return {
      importStatus: true, //true为导入成功，false为导入失败
      closeTime: 0,
      result: {},
      columns: [
        {
          title: '手机号码',
          dataIndex: 'victimPhone',
          width: '50%',
          scopedSlots: { customRender: "victimPhone" }
        },
        {
          title: '无效原因',
          dataIndex: 'checkErrortype',
          width: '50%',
          scopedSlots: { customRender: "checkErrortype" }
        }
      ]
    }
  },
  methods: {
    // 导入或者增加，成功后显示提示
    getDatas(val) {
      this.result = val;
      // 导入成功
      if (Object.keys(val).length>0 && val.errorPhoneNum === 0 && val.errorPhoneList.length === 0) {
        this.importStatus = true;
        this.closeTime = 3;
        var auth_timetimer = setInterval(() => {
          this.closeTime--;
          if (this.closeTime <= 0) {
            this.$emit('ok');
            clearInterval(auth_timetimer);
          }
        }, 1000)
      // 导入失败
      } else if (Object.keys(val).length>0 && val.errorPhoneNum > 0 && val.errorPhoneList.length > 0) {
        this.importStatus = false;
      }
    },
    handleModal() {
      exportPhoneXls(this.result).then(async res => {
        if(res && res.size>0) {
          const fileName = '无效手机号列表.xls'
          await downLoadMix(res, fileName)
          this.$emit('ok')
        } else {
          this.$message.warn("导出失败！")
        }
      })
    },
    submitForm() {}
  }
}
</script>

<style lang="less" scoped>
.modal-status {
  &.modal-status-finish {
    text-align: center;
    padding: 60px 0;
    .finish {
      font-size: 70px;
      color: #52c41a;
    }
    h3 {
      font-size: 24px;
      font-weight: bold;
      padding: 30px 0 10px;
    }
    p {
      font-size: 15px;
    }
  }
  .fail {
    font-size: 70px;
    color: #f5222d;
  }
  .blue {
    color: #02a7f0;
  }
  .error {
    color: #d9001b;
  }
}
</style>
